import React from 'react';
import {observable} from "mobx";
import {observer} from 'mobx-react';
import {DateFormat, formatToCreateDate} from "auxiliaries/extends/format";
import {Link} from "react-router-dom";
import ImageLoadable from "components/plugins/imageLoading/imageLoading";
import {RouterList} from "@/routers/router-list";
import {DictionaryList, InvestmentPublishTypes} from "auxiliaries/extends/enum";

@observer
class ColumnProjectDisplay extends React.Component {
    @observable imageLoadState;

    static timeProcess(endTime) {
        // let date = new Date(endTime);
        let format = 'mm月dd日';
        // if (date.getFullYear() !== new Date().getFullYear()) {
        //     format = 'yyyy年' + format;
        // }
        return DateFormat(endTime, format)
    }

    render() {
        let {
            item,
            isCanvass = false,
            // isMain = false
        } = this.props;

        let {
            Id,
            ImgPaths,
            Title = "",
            ViewState = '',
            InvestmentExpire,
            InvestmentPublishType,
            To = isCanvass ? RouterList.info.canvass(Id) : RouterList.info.project(Id)
        } = item || {};

        let image = ImgPaths?.[0].Url;
        let endTime = formatToCreateDate(InvestmentExpire);

        ViewState = ViewState || DictionaryList[InvestmentPublishTypes].find(n => n.Id === +InvestmentPublishType)?.Name || InvestmentPublishType;
        return (
            <Link to={To} className={"column-project-display"}>
                <ImageLoadable className={"bg"} src={image}/>
                <div className="group">
                    <div className="space"/>
                    <div className="background-black">
                        <div className="title font-size-30">{Title}</div>
                        <div className="info">
                            <span className="end-time font-size-22">{ColumnProjectDisplay.timeProcess(endTime)}截止</span>
                            {
                                !isCanvass ? null : <span className={"state font-size-20"}>{ViewState}</span>
                            }
                        </div>
                    </div>
                </div>
            </Link>
        );
    }
}

export default ColumnProjectDisplay;

export class ColumnConvertProjectDisplay extends React.Component {
    render() {
        let props = {
            ...this.props
        };
        let originItem = props.item;

        return <ColumnProjectDisplay {...props} item={{
            ...originItem,
        }}/>
    }
}